<template>
	<view>
		<view class="title"> <view class="">充值活动</view> <image @click="topUpShow = true" src="../../static/add.png" mode=""></image>  </view>
		<view class="name-id">
			<view class="each z-margin-b-24" v-for="(item,index) in topUpList">
				<view class="name">充 <text>{{item.money}}</text> ，送 <text>{{item.num}}</text> </view>
				<view class="img-box">
					<image @click="deltopUp(item.id)" src="../../static/subtract.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="title"> <view class="">营销活动功能模块</view> </view>
		<view class="name-id">
			<view class="mk-title">
				<view class="titlen">扫码领券包活动</view>
				<view class="z-flex right-kg">
					<view class="kg" @click="switchCoupon"> <text :class="{'active-switch':coupon}">开</text> <text :class="{'active-switch':!coupon}">关</text> </view>
					<image @click="DeductionShow = true;type=1" src="../../static/add.png" mode=""></image>
				</view>
			</view>
			
			<template v-for="i in marketingList">
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">无门槛优惠券：{{i.money}} </view>
					<view class="img-box">
						<image @click="delCoupon(i)" src="../../static/subtract.png" mode=""></image>
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">有效天数 </view>
					<view class="img-box">
						<text class="z-padding-r-24">{{i.days}}</text>天
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
			</template>
			
			
			<view class="each" style="background-color: #EAEBEE;">
				<view class="gly-name">(管理员）充值活动二维码下载</view>
				<view class="img-box">
					<!-- <image src="../../static/subtract.png" mode=""></image> -->
				</view>
			</view>
		</view>
		
		
		<view class="name-id">
			<view class="mk-title">
				<view class="titlen">推荐返券活动 <text>（券包设置）</text> </view>
				<view class="z-flex right-kg">
					<image @click="DeductionShow = true;type=2" src="../../static/add.png" mode=""></image>
				</view>
			</view>
			
			<template v-for="i in referrerList">
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">无门槛优惠券：{{i.money}} </view>
					<view class="img-box">
						<image @click="delCoupon(i)" src="../../static/subtract.png" mode=""></image>
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">有效天数 </view>
					<view class="img-box">
						<text class="z-padding-r-24">{{i.days}}</text>天
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
			</template>
		</view>
		
		<view class="name-id">
			<view class="mk-title">
				<view class="titlen">优惠券模板</view>
				<view class="right-kg">
					<image @click="yhqShow = true" src="../../static/add.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="explain">不可删除，请按需添加，可设置多张相同面额的，建议优惠券模板券额：3元、5元、8元、10元、20元</view> -->
			<template v-for="i in templateList">
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">优惠金额：{{i.money}} </view>
					<view class="img-box">
						<image @click="delCoupon(i)" src="../../static/subtract.png" mode=""></image>
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">有效天数 </view>
					<view class="img-box">
						<text class="z-padding-r-24">{{i.days}}</text>天
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">可用时间段 </view>
					<view class="img-box">
						<text class="z-padding-r-24">{{i.timed}}</text>
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
				<view class="each">
					<view class="name">使用门槛 </view>
					<view class="img-box">
						<text class="z-padding-r-24">{{i.threshold}}</text>
					</view>
				</view>
				<view style="height: 24rpx;width: 1rpx;"></view>
			</template>
		</view>
		
		<view style="height: 24rpx;width: 1rpx;"></view>
		<view class="illustrate-box">
			<view class="illustrate-title">—— 优惠券使用规则 ——</view>
			<view class="illustrate">
				检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。 
				<br/><br/>
				检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。 
				<br/><br/>
				检查台球是否按照要求全部归还、白球是否归还在指定位置，否则将提示关锁失败。 
			</view>
		</view>
		
		<view style="height: 54rpx;width: 1rpx;"></view>
		
		
		<u-popup closeable :round="10" :show="topUpShow" mode="center"  @close="close" @open="open">
		    <view class="popup-box">
		        <view class="pop-title">充值金额</view>
				<view style="height: 48rpx;width: 1rpx;"></view>
				<view class="input">
					<input type="number" v-model="money" placeholder="请输入充值金额" />
				</view>
				<view style="height: 32rpx;width: 1rpx;"></view>
				<view class="input">
					<input type="number" v-model="num" placeholder="请输入赠送金额" />
				</view>
				<view class="pop-btn" @click="addTopUp">添加</view>
		    </view>
		</u-popup>
		
		<u-popup closeable :round="10" :show="DeductionShow" mode="center"  @close="close" @open="open">
		    <view class="popup-box">
		        <view class="pop-title">抵扣金额</view>
				<view style="height: 48rpx;width: 1rpx;"></view>
				<view class="input">
					<input type="number" v-model="money" placeholder="请输入抵扣金额" />
				</view>
				<view style="height: 32rpx;width: 1rpx;"></view>
				<view class="input">
					<input type="number" v-model="days" placeholder="请输入有效天数" />
				</view>
				<view class="pop-btn" @click="addMarketing">添加套餐</view>
		    </view>
		</u-popup>
		
		<u-popup closeable :round="10" :show="yhqShow" mode="center"  @close="close" @open="open">
		    <view class="popup-box">
		        <view class="pop-title">优惠券模板</view>
				<view style="height: 48rpx;width: 1rpx;"></view>
				
				<view class="each-title">优惠金额</view>
				<view class="input">
					<input type="number" v-model="money" placeholder="请输入优惠金额" />
				</view>
				
				<view style="height: 40rpx;width: 1rpx;"></view>
				<view class="each-title">有效天数</view>
				<view class="input">
					<input type="number" v-model="days" placeholder="请输入有效天数" />
				</view>
				
				<view style="height: 40rpx;width: 1rpx;"></view>
				<view class="each-title">可用时间段</view>
				<view class="input z-flex">
					<input type="number" v-model="stime" placeholder="请输入" />
					<text>至</text>
					<input type="number" v-model="ftime" placeholder="请输入" />
				</view>
				
				<view style="height: 40rpx;width: 1rpx;"></view>
				<view class="each-title">使用门槛</view>
				<view class="input">
					<input type="number" v-model="threshold" placeholder="请输入" />
				</view>
				
				<view class="pop-btn" @click="addTemplate">添加套餐</view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DeductionShow:false,
				yhqShow:false,
				topUpShow:false,
				coupon:0,
				marketingList:[],//营销活动模块
				referrerList:[],//推荐活动
				templateList:[],//模版
				topUpList:[],//充值
				money:'',//抵扣金额
				days:'',//天数
				type:'',
				stime:'',
				ftime:'',
				threshold:'',//门槛
				
				num:''//赠送金额
			}
		},
		onLoad() {
			this.getMarketingList()
			this.getReferrerList()
			this.getTemplateList()
			this.getTopUpList()
			this.coupon = uni.getStorageSync('coupon')
		},
		methods: {
			//扫码优惠包活动
			switchCoupon(){
				this.$api.post('/switchCoupon').then((res) => {
					if (res.code == 1) {
						this.$toast(res.msg)
						this.coupon = res.data.coupon
						uni.setStorageSync('coupon',res.data.coupon)
					}
				})
			},
			//删除
			delCoupon(item){
				this.$api.post('/delCoupon',{
					id:item.id
				}).then(res => {
					if(res.code == 1){
						this.$toast(res.msg);
						if(item.type == 1){
							this.getMarketingList()
						}else if(item.type == 2){
							this.getReferrerList()
						}else if(item.type == 3) {
							this.getTemplateList()
						}
					}
					
				}).catch(res => {
					
				})
			},
			//充值删除
			deltopUp(id){
				this.$api.post('/delRecharge',{
					id
				}).then(res => {
					if(res.code == 1){
						this.$toast(res.msg);
						this.getTopUpList()
					}
					
				}).catch(res => {
					
				})
			},
			//添加充值活动
			addTopUp(){
				this.$api.post('/addRecharge',{
					money:this.money,
					num:this.num
				}).then(res => {
					this.topUpShow = false
					this.money = ''
					this.num = ''
					this.$toast(res.msg);
					this.getTopUpList()
				}).catch(res => {
					
				})
			},
			//添加营销活动、推荐
			addMarketing(){
				if(!this.money) return this.$toast('请输入抵扣金额');
				if(!this.days) return this.$toast('请输入天数');
				this.$api.post('/addCoupon',{
					type:this.type,
					money:this.money,
					days:this.days,
					threshold:0,
					timed:0
				}).then(res => {
					if(res.code) {
						this.DeductionShow = false
						this.price = ''
						this.days = ''
						if(this.type == 1){
							this.getMarketingList()
						} else {
							this.getReferrerList()
						}
						
					}
				}).catch(res => {
					
				})
			},
			//添加优惠券模版
			addTemplate(){
				if(!this.money) return this.$toast('请输入抵扣金额');
				if(!this.days) return this.$toast('请输入天数');
				if(!this.threshold) return this.$toast('请输入使用门槛');
				if(!this.stime) return this.$toast('请输有效时间');
				if(!this.ftime) return this.$toast('请输有效时间');
				this.$api.post('/addCoupon',{
					type:3,
					money:this.money,
					days:this.days,
					threshold:this.threshold,
					timed:this.stime + '-' + this.ftime
				}).then(res => {
					if(res.code) {
						this.yhqShow = false
						this.money = ''
						this.days = ''
						this.threshold = ''
						this.stime = ''
						this.ftime = ''
						this.getTemplateList()
						
					}
				}).catch(res => {
					
				})
			},
			//充值活动列表
			getTopUpList(){
				this.$api.get('/getMyRecharge').then(res => {
					this.topUpList = res.data
				}).catch(res => {
					
				})
			},
			//营销活动列表
			getMarketingList(){
				this.$api.post('/getMyCoupon',{
					type:1,
				}).then(res => {
					this.marketingList = res.data
				}).catch(res => {
					
				})
			},
			//推荐活动列表
			getReferrerList(){
				this.$api.post('/getMyCoupon',{
					type:2,
				}).then(res => {
					this.referrerList = res.data
				}).catch(res => {
					
				})
			},
			//优惠券模版
			getTemplateList(){
				this.$api.post('/getMyCoupon',{
					type:3,
				}).then(res => {
					this.templateList = res.data
				}).catch(res => {
					
				})
			},
			open() {
			     // console.log('open');
			},
			close() {
			    this.DeductionShow = false
				this.yhqShow = false
				this.topUpShow = false
			    // console.log('close');
			}
		}
	}
</script>

<style lang="scss">
	.title {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx 0 32rpx;
		
		view {
			font-weight: bold;
			font-size: 30rpx;
			color: #1C274C;
			text {
				font-size: 22rpx;
				color: #A4A9B7;
			}
		}
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	
	.name-id {
		width: 622rpx;
		padding: 32rpx;
		margin: auto;
		background: #F7F8FA;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: 24rpx;
		
		.mk-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.titlen {
				font-weight: bold;
				font-size: 28rpx;
				color: #1C274C;
				text {
					color: #A4A9B7;
					font-size: 22rpx;
				}
			}
			.right-kg {
				.kg {
					margin-right: 32rpx;
					width: 108rpx;
					height: 40rpx;
					background: #EAEBEE;
					border-radius: 6rpx;
					font-size: 18rpx;
					color: #A4A9B7;
					line-height: 40rpx;
					text {
						display: inline-block;
						width: 54rpx;
						text-align: center;
					}
					text:nth-child(1){
						border-radius: 6rpx 0rpx 0rpx 6rpx;
					}
					text:nth-child(2){
						border-radius: 0rpx 6rpx 6rpx 0rpx;
					}
					.active-switch {
						background-color: #4BC264;
						color: #FFF;
					}
				}
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		
		.each {
			width: 558rpx;
			padding: 34rpx 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1C274C;
			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #1c274c;
				text {
					color: #FF7B18;
				}
			}
			.img-box {
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			.gly-name {
				font-weight: 500;
				font-size: 28rpx;
				color: #6B738B;
			}
		}
		
		.explain {
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
			line-height: 36rpx;
			padding: 24rpx 0 0 0;
		}
	}
	
	.illustrate-box {
		width: 622rpx;
		padding: 32rpx;
		margin: auto;
		background: #EAEBEE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		.illustrate-title {
			font-weight: bold;
			font-size: 24rpx;
			color: #1C274C;
			text-align: center;
		}
		.illustrate {
			padding-top: 32rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
		}
	}
	
	
	.popup-box {
		width: 520rpx;
		background: #FFFFFF;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		padding: 40rpx;
		.pop-title {
			text-align: center;
			font-weight: 800;
			font-size: 36rpx;
			color: #1C274C;
		}
		.each-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
			padding-bottom: 16rpx;
		}
		.input {
			width: 520rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			input {
				padding: 26rpx 30rpx;
				font-size: 28rpx;
			}
		}
		.pop-btn {
			width: 520rpx;
			height: 90rpx;
			background: #4BC264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			margin-top: 64rpx;
		}
	}
</style>
